<template>
  <div class="container">
    <el-carousel trigger="hover" indicator-position="outside" height="40vh">
      <el-carousel-item v-for="(item, index) in bannerList" :key="index">
        <a :href="item.linkUrl" target="_blank">
          <img :src="'http://localhost:8080'+item.imageUrl" alt="轮播图" class="carousel-image">
        </a>
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <el-row>
        <el-col :span="24">
          <div class="card-box">
            <div ref="patientChart" id="patientChart" class="chart2"></div>
            <div class="chart1"><DoctorStatusChart /></div>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getDailyNewPatients} from '@/api/his/patient'
import { getBannerList } from '@/api/his/banner';
import DoctorStatusChart from '../components/DoctorStatusPieChart/DoctorStatusPieChart.vue';

export default {
  name:'index',
  data() {
    return {
      bannerList: [],
      dailyNewPatientsData: []
    };
  },
  created() {
    this.loadBannerList();
    this.fetchDailyNewPatients();
  },
  components: {
    DoctorStatusChart
  },
  methods: {
    async loadBannerList() {
      try {
        const response = await getBannerList();
        this.bannerList = response.rows;
      } catch (error) {
        this.$message.error('加载轮播图失败');
        console.error(error);
      }
    },
    fetchDailyNewPatients() {
      getDailyNewPatients()
        .then(response => {
          const data = response.data  // 获取到的新增病患数据
          this.dailyNewPatientsData = data
          this.renderChart(data)  // 渲染图表
        })
        .catch(error => {
          console.error('获取数据失败:', error)
        })
    },
    renderChart(data) {
      const chartDom = this.$refs.patientChart
      const myChart = echarts.init(chartDom)
      const dates = data.map(item => item.date)  // 提取日期
      const counts = data.map(item => item.count)  // 提取病患数量
      const option = {
        title: {
          text: '过去七天新增病患数量',
          left: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          textStyle: {
            color: '#000'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates,
          axisLabel: {
            rotate: 45,  // 使x轴的标签倾斜，防止重叠
            textStyle: {
              color: '#666',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 1
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#666',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 1
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '新增病患',
            type: 'line',
            data: counts,
            smooth: true,  // 使线条平滑
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#ff7f50' },  // 渐变色（从浅橙到深橙）
                { offset: 1, color: '#ff6347' }
              ]),
              width: 3
            },
            itemStyle: {
              color: '#ff6347',  // 点的颜色
              borderWidth: 2,
              borderColor: '#fff',
              borderType: 'solid'
            },
            areaStyle: {
              color: 'rgba(255, 99, 71, 0.3)'  // 背景区域的填充色
            },
            emphasis: {
              focus: 'series',
              itemStyle: {
                color: '#ff4500'  // 鼠标悬停时，点的颜色变亮
              }
            }
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需求调整 */
.container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* 轮播图样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 样式可以根据需求调整 */
.card-box {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex; /* 设置为 Flexbox 布局 */
  //justify-content: space-between; /* 图表之间留有空隙 */
  gap: 20px; /* 图表之间的间隔 */
}

/* 图表容器样式 */
#patientChart {
  width: 100%;
  height: 400px;
}
.chart1 {
  flex: 1; /* 让两个图表平均分配容器宽度 */
  height: 400px; /* 设置图表的高度 */
}
.chart2{
  flex: 2; /* 让两个图表平均分配容器宽度 */
  height: 400px; /* 设置图表的高度 */
}
/* 响应式布局调整 */
@media (max-width: 768px) {
  #patientChart {
    height: 300px; /* 针对小屏设备减少图表高度 */
  }

  .el-carousel {
    height: 30vh; /* 在小屏幕上调整轮播图的高度 */
  }
}

@media (max-width: 480px) {
  .el-carousel {
    height: 25vh; /* 更小屏幕上的高度调整 */
  }

  #patientChart {
    height: 250px; /* 小屏幕上调整图表高度 */
  }
}
</style>
